↓메인 콘텐츠로 이동하기
  1. Hugo & Congo 문서/

콘텐츠 예시

9 분
목차

문서를 순서대로 읽었다면 이제 Congo에서 사용 가능한 모든 기능과 구성을 알고 있을 것입니다. 이 페이지는 모든 것을 함께 모으고 콘텐츠를 생성하고 구조화하는 방법을 보여주는 예시를 제공합니다.

Tip: 새로운 Hugo 사용자라면 공식 문서를 확인하여 페이지 번들과 리소스에 대해 더 자세히 알아보세요.

이 페이지의 예시는 모두 다른 시나리오에 적용할 수 있지만 콘텐츠 아이템을 형식화하는 방법에 대한 아이디어를 제공할 것입니다.

분기 페이지 #

Hugo의 분기 페이지 번들은 홈페이지, 섹션 목록 및 태그 페이지와 같은 항목을 포함합니다. 중요한 점은 이 콘텐츠 유형의 파일 이름이 **_index.md**임을 기억하는 것입니다.

Congo는 분기 페이지에 지정된 프론트 매터 매개변수를 준수하고 이는 해당 페이지에 대한 기본 설정을 재정의합니다. 예를 들어, 분기 페이지에 title 매개변수를 설정하면 페이지 제목을 재정의할 수 있습니다.

홈페이지 #
Layout: layouts/index.html
Content: content/_index.md

Congo의 홈페이지는 홈페이지 레이아웃 구성 매개변수에 의해 제어되는 오버랩 디자인을 가지고 있습니다. 이에 대해 더 자세히 알아보려면 홈페이지 레이아웃 섹션을 참조하세요.

홈페이지에 사용자 정의 콘텐츠를 추가하려면 content/_index.md 파일을 생성하세요. 이 파일의 내용은 홈페이지에 포함됩니다.

예시:

---
title: "Congo에 오신 것을 환영합니다!"
description: "이것은 홈페이지에 콘텐츠를 추가하는 데모입니다."
---
웹사이트에 오신 것을 환영합니다! 저는 정말 기쁘게 여러분이 방문해 주셨기를 바랍니다.

이 예시는 사용자 정의 제목을 설정하고 페이지 본문에 추가 텍스트를 추가합니다. 모든 Markdown 형식의 텍스트는 콘텐츠 중에서도 허용되며, 이는 줄임표, 이미지 및 링크를 포함합니다.

목록 페이지 #
Layout: layouts/_default/list.html
Content: content/../_index.md

목록 페이지는 모든 페이지를 하나의 섹션으로 그룹화하고 방문자가 각 페이지로 이동할 수 있는 방법을 제공합니다. 블로그나 포트폴리오는 글이나 프로젝트를 함께 그룹화하는 목록 페이지의 예입니다.

목록 페이지를 만드는 것은 콘텐츠 폴더에 하위 디렉토리를 만드는 것과 같습니다. 예를 들어, “Projects” 섹션을 만들려면 content/projects/를 만듭니다. 그런 다음 각 프로젝트에 대한 Markdown 파일을 만듭니다.

목록 페이지는 기본적으로 생성되지만, 콘텐츠를 사용자 지정하려면 새 디렉토리에 _index.md 페이지도 만들어야 합니다.

.
└── content
    └── projects
        ├── _index.md          # /projects
        ├── first-project.md   # /projects/first-project
        └── another-project
            ├── index.md       # /projects/another-project
            └── project.jpg

Hugo는 프로젝트 폴더의 페이지에 대한 URL을 생성합니다.

홈페이지와 마찬가지로 _index.md 파일의 콘텐츠는 생성된 목록 인덱스에 출력됩니다. Congo는 이 섹션 아래에 있는 모든 페이지를 나열합니다.

예시:

---
title: "프로젝트"
description: "내 프로젝트에 대해 알아보세요."
cascade:
  showReadingTime: false
---
이 섹션에는 현재 모든 프로젝트가 포함되어 있습니다.

이 예시에서는 특별한 cascade 매개변수를 사용하여 이 섹션 내의 모든 하위 페이지에서 읽는 시간을 숨깁니다. 이렇게 하면 모든 프로젝트 페이지에서 읽는 시간이 표시되지 않습니다. 이는 전체 섹션에 대해 기본 테마 매개변수를 재정의하는 좋은 방법입니다. 각 개별 페이지에 포함할 필요가 없습니다.

이 사이트의 샘플 섹션은 목록 페이지의 예입니다.

태그 페이지 #
List layout: layouts/_default/taxonomy.html
Term layout: layouts/_default/term.html
Content: content/../_index.md

태그 페이지는 두 가지 형태로 나타납니다 - 태그 목록과 태그 항목입니다. 목록은 주어진 태그 내의 각 항목을 나열하고, 항목은 주어진 항목에 관련된 페이지 목록을 표시합니다.

용어는 조금 헷갈릴 수 있으므로 태그 이름이 animals인 예를 살펴보겠습니다.

먼저, Hugo에서 태그를 사용하려면 태그를 구성해야 합니다. 이는 config/_default/taxonomies.toml 파일을 생성하고 태그 이름을 정의하여 수행됩니다.

# config/_default/taxonomies.toml

animal = "animals"

Hugo는 태그를 사용하려면 태그를 구성해야 합니다. 이는 config/_default/taxonomies.toml 파일을 생성하고 태그 이름을 정의하여 수행됩니다.

이제 animals 태그가 존재하므로 개별 콘텐츠 항목에 추가해야 합니다. 이는 프론트 매터에 삽입하는 것만큼 간단합니다.

---
title: "사자 우리 속으로"
description: "이번 주는 사자에 대해 배우고 있습니다."
animals: ["lion", "cat"]
---

이제 용어가 animals 분류 내에 두 개의 항목 이 생성되었습니다. lion과 cat

아직은 명확하지 않지만, 이제 Hugo는 이 새로운 분류 체계에 대한 목록 및 용어 페이지를 생성할 것입니다. 기본적으로 목록 페이지는 /animals/에서, 용어 페이지는 /animals/lion/와 /animals/cat/에서 액세스할 수 있습니다.

목록 페이지는 분류 내에 포함된 모든 용어를 나열합니다. 이 예시에서는 /animals/로 이동하면 “lion"과 “cat"이 있는 페이지를 볼 수 있으며, 이는 개별 용어 페이지로 이동합니다.

용어 페이지는 해당 용어 내에 포함된 모든 페이지를 나열합니다. 이 용어 목록은 일반적인 목록 페이지와 매우 유사하게 작동합니다.

분류 페이지에 사용자 정의 콘텐츠를 추가하려면 분류 이름을 하위 디렉토리 이름으로 사용하여 콘텐츠 폴더에 _index.md 파일을 생성하세요.

.
└── content
    └── animals
        ├── _index.md       # /animals
        └── lion
            └── _index.md   # /animals/lion

이 콘텐츠 파일의 내용은 이제 생성된 분류 페이지에 배치됩니다. 다른 콘텐츠와 마찬가지로, 프론트 매터 변수를 사용하여 기본값을 재정의할 수 있습니다. 이렇게 하면 lion이라는 태그를 가질 수 있지만 title을 “Lion"으로 재정의할 수 있습니다.

이 예시가 실제로 작동하는 방식을 확인하려면 이 사이트의 태그 분류 목록을 확인하세요.

리프 페이지 #
Layout: layouts/_default/single.html
Content (standalone): content/../page-name.md
Content (bundled): content/../page-name/index.md

Hugo의 리프 페이지는 기본적으로 표준 콘텐츠 페이지입니다. 이는 하위 페이지를 포함하지 않는 페이지입니다. 이는 예를 들어, 소개 페이지 또는 웹사이트의 블로그 섹션에 있는 개별 블로그 게시물과 같은 것들입니다.

리프 페이지에 대해 기억해야 할 중요한 점은 분기 페이지와 달리, 리프 페이지는 index.md 언더바 없이 명명되어야 한다는 것입니다. 리프 페이지는 또한 섹션의 최상위 수준에서 함께 그룹화될 수 있으며 고유한 이름으로 명명될 수 있습니다.

.
└── content
    └── blog
        ├── first-post.md     # /blog/first-post
        ├── second-post.md    # /blog/second-post
        └── third-post
            ├── index.md      # /blog/third-post
            └── image.jpg

페이지에 자산을 포함할 때, 이미지와 같은 경우, 페이지 번들을 사용해야 합니다. 페이지 번들은 index.md 파일이 있는 하위 디렉토리를 사용하여 생성됩니다. 이러한 자산을 콘텐츠와 함께 그룹화하는 것이 중요하며, 많은 쇼트코드와 기타 테마 논리는 리소스가 페이지와 함께 번들로 포함된다고 가정합니다.

예시:

---
title: "My First Blog Post"
date: 2022-01-25
description: "Welcome to my blog!"
summary: "Learn more about me and why I am starting this blog."
tags: ["welcome", "new", "about", "first"]
---
_This_ is the content of my blog post.

리프 페이지는 많은 프론트 매터 매개변수를 사용하여 표시 방식을 사용자 지정할 수 있습니다.

Congo는 외부 페이지에 링크를 허용하는 특별한 기능을 가지고 있습니다. 이는 예를 들어, Medium에 있는 콘텐츠를 링크하거나, 허용하려는 경우 외부 페이지에 링크를 허용하는 것입니다.

외부 링크 페이지를 만들기 위해 일부 특별한 프론트 매터가 필요합니다.

---
title: "My Medium post"
date: 2022-01-25
externalUrl: "https://medium.com/"
summary: "I wrote a post on Medium."
showReadingTime: false
_build:
  render: "false"
  list: "local"
---

Along with the normal front matter parameters like title and summary, the externalUrl parameter is used to tell Congo that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.

또한, 우리는 일반 페이지를 생성하지 않도록 하기 위해 특별한 Hugo 프론트 매터 매개변수 _build를 사용합니다. 외부 URL을 링크하고 있으므로 페이지를 생성할 필요가 없습니다!

테마는 이러한 외부 링크 페이지를 생성하기 위한 어케테이프를 포함합니다. 새 콘텐츠를 만들 때 -k external을 지정하세요.

hugo new -k external posts/my-post.md

간단한 페이지 #
Layout: layouts/_default/simple.html
Front Matter: layout: "simple"

Congo는 간단한 페이지를 위한 특별한 레이아웃을 포함합니다. 간단한 레이아웃은 특별한 테마 기능 없이 페이지에 Markdown 콘텐츠를 배치하는 전체 너비 템플릿입니다.

간단한 레이아웃에서 사용 가능한 기능은 브레드크럼스와 공유 링크뿐입니다. 그러나 이러한 기능은 일반 페이지의 프론트 매터 변수를 사용하여 여전히 제어할 수 있습니다.

특정 페이지에 간단한 레이아웃을 활성화하려면 layout 프론트 매터 변수에 "simple" 값을 추가하세요:

---
title: "My landing page"
date: 2022-03-08
layout: "simple"
---
This page content is now full-width.

사용자 정의 레이아웃 #

Hugo는 전체 사이트, 개별 섹션 또는 페이지에 대해 사용자 정의 레이아웃을 쉽게 만들 수 있습니다.

레이아웃은 모든 정상적인 Hugo 템플릿 규칙을 따르고 공식 Hugo 문서에서 더 많은 정보를 확인할 수 있습니다.

기본 레이아웃 재정의 #

위에서 설명한 각 콘텐츠 유형은 각 페이지 유형을 생성하는 데 사용되는 레이아웃 파일을 나열합니다. 이 파일이 로컬 프로젝트에 생성되면 테마 템플릿을 재정의하고 웹사이트의 기본 스타일을 사용자 지정할 수 있습니다.

예를 들어 layouts/_default/single.html 파일을 생성하면 리프 페이지의 레이아웃을 완전히 사용자 지정할 수 있습니다.

섹션 레이아웃 사용자 정의 #

개별 콘텐츠 섹션에 대해 사용자 정의 레이아웃을 만드는 것도 간단합니다. 이는 특정 유형의 콘텐츠를 특정 스타일로 나열하려는 경우에 유용합니다.

특별한 레이아웃을 사용하여 프로젝트를 나열하는 사용자 정의 “프로젝트” 페이지를 만드는 예제를 단계별로 살펴 보겠습니다.

이렇게 하려면 일반적인 휴고 콘텐츠 규칙을 사용하여 콘텐츠를 구조화하고 프로젝트를 위한 섹션을 만듭니다. 또한 콘텐츠와 동일한 디렉토리 이름을 사용하고 list.html 파일을 추가하여 프로젝트 섹션에 대한 새 레이아웃을 만듭니다.

.
└── content
│   └── projects
│       ├── _index.md
│       ├── first-project.md
│       └── second-project.md
└── layouts
    └── projects
        └── list.html

이 list.html 파일은 이제 기본 목록 템플릿을 재정의하지만 projects 섹션에 대해서만 재정의됩니다. 이 파일을 살펴보기 전에 먼저 개별 프로젝트 파일을 살펴봅시다.

---
title: "Congo"
date: 2021-08-11
icon: "github"
description: "A theme for Hugo built with Tailwind CSS."
topics: ["Hugo", "Web", "Tailwind"]
externalUrl: "https://github.com/jpanther/congo/"
---

이 예시에서는 각 프로젝트에 대한 메타데이터를 할당하여 나중에 목록 템플릿에서 사용할 수 있습니다. 페이지 콘텐츠는 없지만 포함할 수 있습니다. 결국 이는 여러분의 사용자 정의 템플릿입니다!

프로젝트가 정의되면 이제 각 프로젝트의 세부 정보를 출력하는 목록 템플릿을 만들 수 있습니다.

{{ define "main" }}
  <section class="mt-8">
    {{ range .Pages }}
      <article class="pb-6">
        <a class="flex" href="{{ .Params.externalUrl }}">
          <div class="mr-3 text-3xl text-neutral-300">
            <span class="relative inline-block align-text-bottom">
              {{ partial "icon.html" .Params.icon }}
            </span>
          </div>
          <div>
            <h3 class="flex text-xl font-semibold">
              {{ .Title }}
            </h3>
            <p class="text-sm text-neutral-400">
              {{ .Description }}
            </p>
          </div>
        </a>
      </article>
    {{ end }}
  </section>
{{ end }}

이 예시는 매우 간단하지만, 이 섹션의 각 페이지(즉, 각 프로젝트)를 반복하고 각 프로젝트와 함께 아이콘과 함께 HTML 링크를 출력합니다. 각 프로젝트의 프론트 매터에 있는 메타데이터는 표시되는 정보를 결정하는 데 사용됩니다.

관련 스타일과 클래스를 사용할 수 있는지 확인해야 하며, 이를 위해 Tailwind CSS를 다시 컴파일해야 할 수도 있습니다. 이에 대한 자세한 내용은 고급 사용자 정의 섹션에서 확인할 수 있습니다.

이러한 사용자 정의 템플릿을 만들 때, 기본 Congo 템플릿이 작동하는 방식을 살펴보고 그것을 가이드로 사용하는 것이 가장 쉽습니다. 기억하세요, Hugo 문서는 템플릿을 만드는 데 대한 더 많은 정보를 제공합니다.